<template>
    <div class="appointment-card">
        <!-- 预约卡片头部 -->
        <div class="card-header">
            <div class="patient-info">
                <span class="patient-name">{{ appointmentData.name || '患者姓名' }}</span>
                <span class="relationship-tag">{{ appointmentData.relationship || '本人' }}</span>
            </div>
            <div class="medical-state">
                <span :class="['state-badge', appointmentData.medicalState ? 'active' : 'inactive']">
                    {{ appointmentData.medicalState ? '已就诊' : '待就诊' }}
                </span>
            </div>
        </div>

        <!-- 预约详情 -->
        <div class="card-content">
            <div class="appointment-info">
                <div class="info-row">
                    <span class="label">科室：</span>
                    <span class="value">{{ appointmentData.departmentName || appointmentData.department }}</span>
                </div>
                <div class="info-row">
                    <span class="label">医生：</span>
                    <span class="value">{{ appointmentData.doctorName }}</span>
                </div>
                <div class="info-row">
                    <span class="label">主治医师：</span>
                    <span class="value">{{ appointmentData.attendingName }}</span>
                </div>
                <div class="info-row">
                    <span class="label">就诊时间：</span>
                    <span class="value">{{ formatTime(appointmentData.outpatientTime) }}</span>
                </div>
                <div class="info-row">
                    <span class="label">预约时间：</span>
                    <span class="value">{{ formatTime(appointmentData.appointmentTime) }}</span>
                </div>
                <div class="info-row">
                    <span class="label">等候时间：</span>
                    <span class="value">{{ appointmentData.waitingTime }}</span>
                </div>
            </div>

            <!-- 费用信息 -->
            <div class="cost-info">
                <span class="cost-label">挂号费：</span>
                <span class="cost-value">¥{{ appointmentData.cost }}</span>
            </div>
        </div>

        <!-- 患者信息 -->
        <div class="patient-details">
            <div class="detail-title">患者信息</div>
            <div class="detail-content">
                <div class="info-row">
                    <span class="label">证件类型：</span>
                    <span class="value">{{ appointmentData.idCardType || '身份证' }}</span>
                </div>
                <div class="info-row">
                    <span class="label">证件号码：</span>
                    <span class="value">{{ maskIdCard(appointmentData.idCardNum) }}</span>
                </div>
                <div class="info-row">
                    <span class="label">医保卡：</span>
                    <span class="value">{{ appointmentData.medicalCard || '未绑定' }}</span>
                </div>
                <div class="info-row">
                    <span class="label">联系电话：</span>
                    <span class="value">{{ maskPhone(appointmentData.phone) }}</span>
                </div>
            </div>
        </div>

        <!-- 其他信息 -->
        <div v-if="appointmentData.reason || appointmentData.desc" class="additional-info">
            <div v-if="appointmentData.reason" class="info-row">
                <span class="label">就诊原因：</span>
                <span class="value">{{ appointmentData.reason }}</span>
            </div>
            <div v-if="appointmentData.desc" class="info-row">
                <span class="label">备注：</span>
                <span class="value">{{ appointmentData.desc }}</span>
            </div>
            <div v-if="appointmentData.cancelTime" class="info-row">
                <span class="label">取消时间：</span>
                <span class="value cancel-time">{{ formatTime(appointmentData.cancelTime) }}</span>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="card-actions">
            <van-button v-if="!appointmentData.medicalState" type="primary" size="small" @click="handleAction('view')">
                查看详情
            </van-button>
            <van-button v-if="!appointmentData.medicalState" plain type="danger" size="small"
                @click="handleAction('cancel')">
                取消预约
            </van-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

// 定义预约数据类型
interface AppointmentData {
    attending: string
    doctorAddress: string
    department: string
    attendingName: string
    doctorName: string
    registTypeId: number
    outpatientTime: string
    waitingTime: string
    cost: number
    appointmentTime: string
    medicalState: boolean
    reason: string
    cancelTime: string
    desc: string
    registerName: string
    patientId: number
    relationship: string
    name: string
    idCardType: string
    idCardNum: string
    medicalCard: string
    phone: string
    departmentName: string
}

// 定义 props
const props = defineProps<{
    appointmentData: AppointmentData
}>()

// 定义 emits
const emit = defineEmits<{
    action: [type: string, data: AppointmentData]
}>()

// 格式化时间
const formatTime = (timeStr: string) => {
    if (!timeStr) return '--'
    try {
        const date = new Date(timeStr)
        return date.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit'
        })
    } catch {
        return timeStr
    }
}

// 脱敏身份证号
const maskIdCard = (idCard: string) => {
    if (!idCard) return '--'
    if (idCard.length < 8) return idCard
    return idCard.substring(0, 4) + '****' + idCard.substring(idCard.length - 4)
}

// 脱敏手机号
const maskPhone = (phone: string) => {
    if (!phone) return '--'
    if (phone.length < 7) return phone
    return phone.substring(0, 3) + '****' + phone.substring(phone.length - 4)
}

// 处理操作
const handleAction = (type: string) => {
    emit('action', type, props.appointmentData)
}
</script>

<style scoped>
.appointment-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid #f0f0f0;
}

/* 卡片头部 */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f7f8fa;
}

.patient-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.patient-name {
    font-size: 18px;
    font-weight: 600;
    color: #323233;
}

.relationship-tag {
    background-color: #e8f4ff;
    color: #1989fa;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.medical-state {
    display: flex;
    align-items: center;
}

.state-badge {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.state-badge.active {
    background-color: #e8f8f5;
    color: #52c41a;
}

.state-badge.inactive {
    background-color: #fff2e8;
    color: #ff976a;
}

/* 卡片内容 */
.card-content {
    margin-bottom: 16px;
}

.appointment-info {
    margin-bottom: 12px;
}

.info-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    line-height: 1.5;
}

.info-row:last-child {
    margin-bottom: 0;
}

.label {
    font-size: 14px;
    color: #969799;
    min-width: 80px;
    flex-shrink: 0;
}

.value {
    font-size: 14px;
    color: #323233;
    flex: 1;
}

.value.cancel-time {
    color: #ee0a24;
}

/* 费用信息 */
.cost-info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 12px;
    background-color: #f7f8fa;
    border-radius: 8px;
    margin-top: 12px;
}

.cost-label {
    font-size: 14px;
    color: #969799;
    margin-right: 8px;
}

.cost-value {
    font-size: 16px;
    font-weight: 600;
    color: #ff976a;
}

/* 患者详情 */
.patient-details {
    margin-bottom: 16px;
    padding-top: 12px;
    border-top: 1px solid #f7f8fa;
}

.detail-title {
    font-size: 15px;
    font-weight: 500;
    color: #323233;
    margin-bottom: 12px;
}

.detail-content {
    padding-left: 8px;
}

/* 其他信息 */
.additional-info {
    margin-bottom: 16px;
    padding-top: 12px;
    border-top: 1px solid #f7f8fa;
}

/* 操作按钮 */
.card-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid #f7f8fa;
}

:deep(.van-button) {
    border-radius: 20px;
    padding: 0 16px;
    height: 32px;
    font-size: 13px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .appointment-card {
        padding: 14px;
        border-radius: 8px;
    }

    .patient-name {
        font-size: 16px;
    }

    .label {
        min-width: 70px;
        font-size: 13px;
    }

    .value {
        font-size: 13px;
    }

    .cost-value {
        font-size: 15px;
    }

    .card-actions {
        flex-direction: column;
        gap: 8px;
    }

    :deep(.van-button) {
        width: 100%;
        height: 36px;
    }
}

/* iPhone 样式适配 */
@media (max-width: 414px) {
    .appointment-card {
        margin-bottom: 12px;
        padding: 12px;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .medical-state {
        align-self: flex-end;
    }

    .info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .label {
        min-width: auto;
        font-weight: 500;
    }

    .cost-info {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
}
</style>